<template>
  <div class="container">
    <div class="mainbox content">
      <!-- 搜索栏在顶部 -->
      <div class="so-wrapper">
        <So />
      </div>
      
      <ul class="clearfix nav1">
        <li style="width: 30%">
          <div style="height: 100%;" class="box fish-monitor">
            <div class="topimg">
              常见鱼病监测
            </div>
            <yuill />
          </div>
        </li>
        <li style="width: 40%">  <!-- 中间区域宽度最大，使地图居中 -->
          <div class="box map-container">
            <ZhanjiangMap />
          </div>
        </li>
        <li style="width: 30%">
          <div class="box expert">
            <div class="topimg" style="width: 530px; position: relative; left: 10px;">
              鱼病专家
            </div>
            <zhuanjia />
          </div>
          <div style="height: 300px;" class="box jilu">
            <div class="topimg topimg2" style="width: 530px; position: relative; left: 25px;">
              识别鱼病记录
            </div>
            <jilu />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import jilu from '@/components/fishill/jilu.vue';
import zhuanjia from '@/components/fishill/zhuanjia.vue';
import yuill from '@/components/fishill/yuill.vue';
import ZhanjiangMap from '@/components/map.vue';
import So from '@/components/fishill/so.vue';

export default {
  components: {
    jilu,
    zhuanjia,
    yuill,
    ZhanjiangMap,
    So,
  },
};
</script>

<style scoped>
.container {
  width: 1950px;
  height: 100vh;
  margin: auto;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
}

.mainbox.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav1 {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
  height: 100%;
  position: relative;
  bottom: 60px;
}

.jilu{
  width: 550px;
  position: relative;
  right: 10px;
  bottom: 133px;
}

.nav1 li {
  display: flex;
  flex-direction: column;
}

.so-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(../assets/top.png);
  background-size: cover;
  text-align: center;
}

.expert{
position: relative;
bottom: 140px;
}

.topimg2{
  width: 560px;
  position: relative;
  left: 10px;
  top: 18px;
}

.fish-monitor{
  position: relative;
  bottom: 140px;
}

.box.map-container {
  height: 730px;
  min-height: 730px;
  max-height: 730px;
  position: relative;
  overflow: hidden;
}
</style>